<template>
	<!-- 轮播图 -->
	<view class="carousel">
		<view class="top_info_tab">
			<view class="">

			</view>
			<view class="img_tab">
				<view class="img_tab_left">
					视频 {{video?1:0}}
				</view>
				<view class="img_tab_right">
					图集 {{res.length||4}}
				</view>
			</view>
			<view class="">

			</view>
		</view>
		<swiper circular="true" duration="400" @change="swiperChange">

			<swiper-item v-if='video'>
				<!-- #ifndef APP-PLUS -->
				<video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
					object-fit="cover"></video>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view style="width:100%; height:100%;">
					<!-- <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
              object-fit="cover"></video> -->
					<view v-html="html" style="width:100%; height:100%;"></view>
				</view>
				<!-- #endif -->

			</swiper-item>
			<swiper-item class="swiper-item" v-for="(item, index) in res" :key="index">

				<view class="image-wrapper">
					<image :src="item" class="loaded" width="100%" height="100%">
					</image>
				</view>
			</swiper-item>
		</swiper>
		<!-- <view class="swiper-dots">{{ current }}/{{ video ? res.length + 1 : res.length }}</view> -->

	</view>
</template>
<script>
	export default {
		data() {
			return {
				current: 1,
				html: ""
			};
		},
		props: {
			res: {
				type: Array,
				default: []
			},
			video: {
				type: String
			}
		},
		watch: {
			video(val) {
				this.html = '<video muted="muted"   ref="videoPlay" style="width:100%; height:100%;" src=' + val +
					'  page-gesture show-mute-btn   autoplay  webkit-playsinline="" playsinline="" ></video>'
			}
		},
		methods: {
			// 轮播图对应的dot
			swiperChange(e) {
				this.current = e.detail.current + 1;
			},
			goPage(route) {
				this.$router.smartNavigate({
					url: `/pages/rent/${route}` // 跳转到对应路径的页面
				})
			},
		},
		mounted() {
			// console.log(this.video)
		},

	};
</script>
<style lang="less" scoped>
	.top_info_tab {
		position: absolute;
		left: 50%;
		top: 20px;
		transform: translateX(-50%);
		z-index: 100;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.img_tab {
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		background-color: rgb(0, 0, 0);
		color: #fff;
		opacity: .8;

		.img_tab_right,
		.img_tab_left {
			font-size: 24rpx;
			padding: 10rpx 20rpx;
		}

		.img_tab_right {
			border-left: 1px solid #fff;
			opacity: .5;
		}
	}

	.carousel {
		width: 100vw;
		height: 35vh;
		position: relative;
		background: rgba(0, 0, 0, .5);

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		position: relative;

		// .swiper-dots {
		// 	position: absolute;
		// 	right: 0rpx;
		// 	bottom: 40rpx;
		// 	font-size: 32rpx;
		// 	width: 107rpx;
		// 	height: 44rpx;
		// 	line-height: 44rpx;
		// 	text-align: center;
		// 	border-radius: 30rpx 0rpx 0rpx 30rpx;
		// 	background: #333333;
		// 	opacity: 0.4;
		// 	font-weight: 400;
		// 	color: #fff;
		// }
		.swiper-dots {
			position: absolute;
			left: 0;
			right: 0rpx;
			bottom: -6rpx;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;

			image {
				height: 112rpx;
				width: 100%;
			}
		}
	}

	/deep/ .image-wrapper image {
		opacity: 1 !important;
	}

	.video {
		width: 100%;
		height: 100%;
	}
</style>